<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="click me" onclick="hello()" id="btn">
    <script>
        //封装事件监听
        //事件监听的优点
        //（1）可以绑定多个事件。常规的事件绑定只执行最后绑定的事件，标准浏览器事件监听按顺序执行所有事件，低版本的IE倒序执行
        //（2）可以解除相应的绑定removeEventListener()、detachEvent()
        function addEventHandler(target,type,fn){
            if(target.addEventListener){
                target.addEventListener(type,fn);
            }else{
                target.attachEvent("on"+type,fn);
            }
        }
        function removeEventHandler(target,type,fn){
            if(target.removeEventListener){
                target.removeEventListener(type,fn);
            }else{
                target.detachEvent("on"+type,fn);
            }
        }
        
        function hello1(){
            alert("hello world1");
        }
        function hello2(){
            alert("hello world2");
        }
        var btn = document.getElementById("btn");
        addEventHandler(btn,"click",hello1);//添加事件hello1
        addEventHandler(btn,"click",hello2);//添加事件hello2
        removeEventHandler(btn5,"click",hello1);//移除事件hello1
    </script>
</body>
</html>
